<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <el-pagination
    v-model:currentPage="currentPage"
    v-model:page-size="pageSize"
    class="kj-page"
    :page-sizes="pageSizes"
    :small="small"
    background
    :layout="layout"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script lang="ts" setup>
  import { ref, computed, type PropType } from 'vue';

  const props = defineProps({
    total: {
      required: true,
      type: Number,
    },
    page: {
      type: Number,
      default: 1,
    },
    limit: {
      type: Number,
      default: 20,
    },
    pageSizes: {
      type: Array as PropType<Array<number>>,
      default() {
        return [10, 20, 30];
      },
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper',
    },
    background: {
      type: Boolean,
      default: true,
    },
  });
  const emit = defineEmits([
    'update:limit',
    'update:page',
    'pagination',
    'paginationSizeChange',
  ]);
  // const currentPage = ref(1);
  // const pageSize = ref(10);
  const currentPage = computed({
    get: () => {
      return props.page;
    },
    set: (val) => {
      emit('update:page', val);
    },
  });

  const pageSize = computed({
    get: () => {
      return props.limit;
    },
    set: (val) => {
      emit('update:limit', val);
    },
  });
  const small = ref(false);

  const handleSizeChange = (val: number) => {
    emit('paginationSizeChange', { page: val, limit: pageSize });
  };
  const handleCurrentChange = (val: number) => {
    emit('pagination', { page: val, limit: pageSize });
  };
</script>

<style lang="less" scoped>
  .kj-page {
    // float: right;
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
</style>
